<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 2px solid #ccc;
        }
        .p{
            background-color: lightblue;
        }
        .pp{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="pp">这是box原来的内容</p>
        
    </div>

    <script src="../jquery/jquery.min.js"></script>
    <script>
        var p = '<p>这是appendTo的内容</p>'
        // 生成并插入
        // append/appendTo 插入到元素内末尾
        $('.box').append('<p>这是append的内容</p>');
        $(p).appendTo($('.box'));

        // prepend/prependTo 插入到元素内开头
        $('.box').prepend('<p>这是prepend的内容</p>');

        // before 作为元素的上一个兄弟插入
        $('.box').before('<p>这是before的内容</p>');

        // after 作为元素的下一个兄弟插入
        $('.box').after('<p class="p">这是after的内容</p>');
        $('.pp').on('click', function () {
            console.log('我是pp');
        })

        $('.box').click(function () {
            // $('.box').append($('.p'));

            // 删除自己
            // $(this).remove();
            this.remove();
        })
        // clone(boolean,boolean)  第一个参数是否克隆元素绑定事件和附加数据  默认为false  
        // 第二个数据表示是否克隆元素子节点的绑定事件和附加数据，默认等于 第一个值
        $('.p').after($('.box').clone(true, false))
        // $('.p').after($('.box').clone())
        

        // 原生js  insertAdjacentHTML(插入的位置，html文本)  adjacent：相邻的
        $('.box')[0].insertAdjacentHTML('beforeBegin', '<p>这是beforeBegin的内容</p>');
        $('.box')[0].insertAdjacentHTML('afterBegin', '<p>这是afterBegin的内容</p>');
        $('.box')[0].insertAdjacentHTML('beforeEnd', '<p>这是beforeEnd的内容</p>');
        $('.box')[0].insertAdjacentHTML('afterEnd', '<p>这是afterEnd的内容</p>');
    </script>
</body>
</html>